<template>
  <div class="kpi-card">
    <div class="kpi-title">今日预警次数</div>
    <div class="kpi-value warning">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 22h20L12 2z" fill="#FFD600"/><circle cx="12" cy="17" r="1.5" fill="#FFD600"/><rect x="11" y="8" width="2" height="6" rx="1" fill="#FFD600"/></svg>
      {{ warningCount }}
    </div>
    <div class="kpi-desc">心率异常/设备故障等</div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const warningCount = ref(Math.floor(Math.random()*20+5));
</script>
<style scoped>
.kpi-card { background: #fff; border-radius: 12px; padding: 18px 8px; text-align: center; box-shadow: 0 2px 8px #f0f1f2; min-width: 180px; }
.kpi-title { font-size: 16px; color: #888; margin-bottom: 8px; }
.kpi-value { font-size: 32px; font-weight: bold; }
.kpi-value.warning { color: #FFD600; display: flex; align-items: center; justify-content: center; gap: 8px; }
.kpi-desc { font-size: 13px; color: #bbb; margin-top: 6px; }
</style>